
<template>
    <div>
        <el-header style=" background-color:#fff;text-align: left; font-size: 12px">
          <div class="toolbar">
              <div class="search">
                  <el-input type="text" placeholder="请输入内容" v-model="search" clearable @clear="getsave" />
                  <el-button @click="getsearch"><el-icon><search /></el-icon></el-button>
              </div>
          </div>
        </el-header>
        <div class="container">
            <el-table :data="tickList" fit="true" height=620 style="padding: 10px 30px;">
            <el-table-column prop="openid" label="openid" >
              <template #default=scope>
                <el-input type="text" v-model="scope.row.openid" v-show="scope.row.edit" />
                <span v-show="!scope.row.edit">{{scope.row.openid}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="solution" label="收藏内容" width="400">
              <template #default=scope>
                <el-input type="text" v-model="scope.row.solution" v-show="scope.row.edit" />
                <span class="con" v-show="!scope.row.edit">{{scope.row.content}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="solution" label="题目" width="200">
              <template #default=scope>
                <el-input type="text" v-model="scope.row.solution" v-show="scope.row.edit" />
                <span v-show="!scope.row.edit">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="功能"  fixed="right" width="300">
              <template #default="scope">
                <el-button type="warning" size="mini" @click="topmove(scope.row,scope.$index)">置顶</el-button>
                <el-button type="primary" size="mini" @click="del(scope.row)">删除</el-button>
              </template>
          </el-table-column>
            </el-table>
        <div class="block">
        <!-- 分页 -->
        <el-pagination
          
          style="background-color:aliceblue;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pagenum"
          :page-sizes="[5, 8, 9]"
          :page-size='query.pagesize'
          layout="total, sizes, prev, pager, next, jumper"
          :total="query.total">
        </el-pagination>
        </div>
        
        </div>
        
      
    </div>
        </template>
        
        <script>
    
        
          export default {
            data() {
              var checkMail = (rule, value, callback) => {
                if (!value) {
                  return callback(new Error('不能为空'));
                }
                callback()
              };
              var checkuser = (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('不能为空'));
                } else {
                  callback();
                }
              };
              var checkPhone = (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('不能为空'));
                }else {
                    callback();
                }
              };
             
              return {
                search:"",
                tableData: [],
                dialogTableVisible:false,
                ruleForm: {
                  openid: '',
                  solution: '',
                  contact: '',
                  
                },
                query:{
                  pagenum:1, //当前页码
                  pagesize:5, //每页显示条数
                  total:0
                },
        
                tickList:[],   //当前页数据
              
               rules: {
                  openid: [
                    { validator: checkuser, trigger: 'blur' }
                  ],
                  solution: [
                    { validator: checkPhone, trigger: 'blur' },
                  ],
                  contact: [
                    { validator: checkMail, trigger: 'blur' },
                  ]
                }
                
              }
            },
            methods: {
                //置顶
                topmove(row,index){
                    if(this.tickList){
                        this.tickList.splice(index,1)
                        this.tickList.unshift(row)
                    }
                },
    
              //检查token
              checktoken(){
                let token = localStorage.getItem('token')
                this.$axios({
                  method:'post',
                  url:'token',
                  data:token,
                  headers:{'Authorization': localStorage.getItem('token')}
                }).then(res=>{
                  let {code,msg} = res.data
                  if(code==401){
                    this.$router.push({name:'login'})
                    this.$message.error(msg)
                  }
        
                })
              },
    
              //搜索
              async getsearch(){
                let {data} = await this.$axios.post('searchPoem',{key:this.search})
                console.log(data);
                this.tableData = data.msg
                this.query.total = data.msg.length
                this.getPageInfo()  //获取当前页数据
              },
    
              //当前页数据
              getPageInfo(){
                //清空tickList中的数据
                this.tickList=[];
                // 获取当前页的数据
                for(let i=(this.query.pagenum-1)*this.query.pagesize;i<this.query.total;i++){
                  //把遍历的数据添加到tickList里面
                  if(this.tableData){
                    let data = this.tableData[i]
                    this.tickList.push(data);
                  }
                  //判断是否达到一页的要求
                  if(this.tickList.length===this.query.pagesize)break;
                }},
              //当页码或页面大小改变时触发回调
              handleSizeChange(newSize) {
                this.query.pagesize = newSize
                this.getPageInfo()
        
              },
              handleCurrentChange(newPage) {
                this.query.pagenum=newPage
                this.getPageInfo()
        
              },
                //编辑用户数据
                edit(row){
                  row.edit = true
        
                },
                //保存
                async save(row){
        
                  let {data} = this.$axios.post('updatawuliu',row)
                    console.log(data);
                  row.edit = false
                },
        
              //获取列表
                async getsave(){
                    let {data} = await this.$axios.get('getsave')
    
                    if(data.code == 200){
                        this.tableData = data.msg
                        this.query.total = data.msg.length
                        this.getPageInfo()  //获取当前页数据
                    }
        
                },
                //删除
                async del({name}){
                  let {data} = await this.$axios.post('deletepoem',{name})
                  console.log(data);
                  if(data.code==200){
                    this.getsave()
                  }
                },
        //新增数据
                submitForm(formName) {  
                this.$refs[formName].validate(async (valid) => { 
                  if (valid) {
                    let {data} = await this.$axios.post('addwuliu',this.ruleForm)
                    if(data.code==200){
                      this.getsave()
                      this.dialogTableVisible =false
        
                    }
                  }
                });
              },
              resetForm(formName) {
                this.$refs[formName].resetFields();
              },
        
            },
            mounted(){
                this.getsave()
                this.checktoken()
            }
          };
        </script>
        <style scoped>
        .container{
            margin: 0 0;
            padding: 0 0;
        }
        .toolbar{
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          right: 20px;
        }
        .search{
          display: inline-flex;
          align-items: center;
          margin-right: 20px;
        }
        .con{
          overflow:hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        .con:hover{
          overflow: none;
          text-overflow: unset;
          display: block;
        }
        </style>